<template>
    <div>
        <el-dialog title="注册" :visible.sync="registerVisible" width="300px" center>

            <el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" class="demo-ruleForm">
                <el-form-item prop="userName">
                    <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="registerForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-view" v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="confirmPass">
                    <el-input type="password" placeholder="请再次输入密码" prefix-icon="el-icon-view" v-model="registerForm.confirmPass"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onRegister" type="primary" size="medium" style="width: 100%">注册</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import usersAPI from "../request/api/usersAPI";
export default {
    name: "Register",
    data(){
        //字母开头,长度5-16之间,允许字母数字下划线
        let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        //通过变量保存findUserName方法是否已经被执行过了
        let findUserName = false;
        let validateUserName = (rule, value, callback) => {
            if (!value) {//如果检查不通过 那么findUserName = false;
                findUserName = false;
                return callback(new Error('请输入用户名'));
            }
            if(!reg.test(value)){
                findUserName = false;
                return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"))
            }

            //判断当前的findUserName是否已经通过了后端校验,如果通过那么直接返回成功即可
            if(findUserName) return callback()

            usersAPI.findUserName({userName: value}).then(res=>{
                let data = res.data;
                if(data.code !== "001"){
                    return callback(new Error(data.msg))
                }else {
                    //当所有的检查都通过的时候findUserName = true;
                    findUserName = true;
                    callback();
                }
            })
        };
        let validatePass = (rule, value, callback) => {
            if (!value) {
               return callback(new Error('请输入密码'));
            }
            if(!reg.test(value)){
                return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"))
            }
            callback();
        };
        let validatePass2 = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return{
            registerVisible: false,
            registerForm: {
                userName: "",
                password: "",
                confirmPass: ""
            },
            registerFormRules: {
                userName: [ { validator: validateUserName, trigger: 'blur' }],
                password: [{ validator: validatePass, trigger: 'blur' }],
                confirmPass: [{ validator: validatePass2, trigger: 'blur' }],
            }
        }
    },
    methods:{
        showRegister(){
            this.registerVisible = true;
        },
        onRegister(){
            this.$refs.registerForm.validate(async (valid) => {
                //如果没有通过校验就返回
                if (!valid) return;
                //如果通过了校验那么就去发送注册请求
                let {data: res} = await usersAPI.register(this.registerForm);
                if(res.code !== "001"){
                    this.$notify.error({
                        title: '错误',
                        message: res.msg
                    });
                }else {
                    this.registerVisible = false;
                    this.$notify({
                        title: '成功',
                        message: res.msg,
                        type: 'success'
                    });
                }

            });
        }
    }
}
</script>

<style scoped>

</style>